---
title: CloseButton
package: "@chakra-ui/close-button"
image: "components/close-button.svg"
description:
  CloseButton is essentially a button with a close icon. It is used to handle
  the close functionality in feedback and overlay components like Alerts,
  Toasts, Drawers and Modals
---

CloseButton is essentially a button with a close icon. It is used to handle the
close functionality in feedback and overlay components like
[Alerts](/docs/feedback/alert), [Toasts](/docs/feedback/toast),
[Drawers](/docs/overlay/drawer) and [Modals](/docs/overlay/modal).

<ComponentLinks
  theme={{ componentName: "close-button" }}
  github={{ package: "close-button" }}
  npm={{ package: "@chakra-ui/close-button" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { CloseButton } from "@chakra-ui/react"
```

## Usage

```jsx
<CloseButton />
```

### Button Size

Pass the `size` prop to adjust the size of the close button. Values can be `sm`,
`md` or `lg`.

```jsx
<Stack direction="row" spacing={6}>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</Stack>
```

## Props

The CloseButton composes `Box` component.

<PropsTable of="CloseButton" />
